<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <title>Table header information cells for HTML table</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../table.js"></script>

  <script type="application/javascript">

    function doTest()
    {
      //////////////////////////////////////////////////////////////////////////
      // column header from thead and row header from @scope inside of tfoot

      var headerInfoMap = [
        {
          cell: "table1_cell_1",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_weekday", "table1_date" ]
        },
        {
          cell: "table1_cell_2",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_day", "table1_date" ]
        },
        {
          cell: "table1_cell_3",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_qty" ]
        },
        {
          cell: "table1_cell_4",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_weekday", "table1_date" ]
        },
        {
          cell: "table1_cell_5",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_day", "table1_date" ]
        },
        {
          cell: "table1_cell_6",
          rowHeaderCells: [],
          columnHeaderCells: [ "table1_qty" ]
        },
        {
          cell: "table1_cell_7",
          rowHeaderCells: [ "table1_total" ],
          columnHeaderCells: [ "table1_qty" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // column and row headers from thead and @scope

      headerInfoMap = [
        {
          cell: "table2_cell_2",
          rowHeaderCells: [ "table2_rh_1" ],
          columnHeaderCells: [ "table2_ch_2" ]
        },
        {
          cell: "table2_cell_3",
          rowHeaderCells: [ "table2_rh_1" ],
          columnHeaderCells: [ "table2_ch_3" ]
        },
        {
          cell: "table2_cell_5",
          rowHeaderCells: [ "table2_rh_2" ],
          columnHeaderCells: [ "table2_ch_2" ]
        },
        {
          cell: "table2_cell_6",
          rowHeaderCells: [ "table2_rh_2" ],
          columnHeaderCells: [ "table2_ch_3" ]
        },
        {
          cell: "table2_rh_1",
          rowHeaderCells: [],
          columnHeaderCells: [ "table2_ch_1" ]
        },
        {
          cell: "table2_rh_2",
          rowHeaderCells: [],
          columnHeaderCells: [ "table2_ch_1" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // column headers from @headers

      headerInfoMap = [
        {
          cell: "table3_cell_1",
          rowHeaderCells: [],
          columnHeaderCells: [ "table3_ch_1" ]
        },
        {
          cell: "table3_cell_2",
          rowHeaderCells: [],
          columnHeaderCells: [ "table3_ch_2" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // table consisted of one column

      headerInfoMap = [
        {
          cell: "table4_cell",
          rowHeaderCells: [],
          columnHeaderCells: [ "table4_ch" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // table consisted of one row

      headerInfoMap = [
        {
          cell: "table5_cell",
          rowHeaderCells: [ "table5_rh" ],
          columnHeaderCells: [ ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // @headers points to table cells

      headerInfoMap = [
        {
          cell: "table6_cell",
          rowHeaderCells: [ "table6_rh" ],
          columnHeaderCells: [ "table6_ch" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // @scope="rowgroup" and @scope="row"

      headerInfoMap = [
        {
          cell: "t7_r1c1",
          rowHeaderCells: [ "t7_Mary", "t7_Females" ],
          columnHeaderCells: [ "t7_1km" ]
        },
        {
          cell: "t7_r1c2",
          rowHeaderCells: [ "t7_Mary", "t7_Females" ],
          columnHeaderCells: [ "t7_5km" ]
        },
        {
          cell: "t7_r1c3",
          rowHeaderCells: [ "t7_Mary", "t7_Females" ],
          columnHeaderCells: [ "t7_10km" ]
        },
        {
          cell: "t7_r2c1",
          rowHeaderCells: [ "t7_Betsy", "t7_Females" ],
          columnHeaderCells: [ "t7_1km" ]
        },
        {
          cell: "t7_r2c2",
          rowHeaderCells: [ "t7_Betsy", "t7_Females" ],
          columnHeaderCells: [ "t7_5km" ]
        },
        {
          cell: "t7_r2c3",
          rowHeaderCells: [ "t7_Betsy", "t7_Females" ],
          columnHeaderCells: [ "t7_10km" ]
        },
        {
          cell: "t7_r3c1",
          rowHeaderCells: [ "t7_Matt", "t7_Males" ],
          columnHeaderCells: [ "t7_1km" ]
        },
        {
          cell: "t7_r3c2",
          rowHeaderCells: [ "t7_Matt", "t7_Males" ],
          columnHeaderCells: [ "t7_5km" ]
        },
        {
          cell: "t7_r3c3",
          rowHeaderCells: [ "t7_Matt", "t7_Males" ],
          columnHeaderCells: [ "t7_10km" ]
        },
        {
          cell: "t7_r4c1",
          rowHeaderCells: [ "t7_Todd", "t7_Males" ],
          columnHeaderCells: [ "t7_1km" ]
        },
        {
          cell: "t7_r4c2",
          rowHeaderCells: [ "t7_Todd", "t7_Males" ],
          columnHeaderCells: [ "t7_5km" ]
        },
        {
          cell: "t7_r4c3",
          rowHeaderCells: [ "t7_Todd", "t7_Males" ],
          columnHeaderCells: [ "t7_10km" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // @scope="colgroup" and @scope="col"

      headerInfoMap = [
        {
          cell: "t8_r1c1",
          rowHeaderCells: [ "t8_1km" ],
          columnHeaderCells: [ "t8_Mary", "t8_Females" ]
        },
        {
          cell: "t8_r1c2",
          rowHeaderCells: [ "t8_1km" ],
          columnHeaderCells: [ "t8_Betsy", "t8_Females" ]
        },
        {
          cell: "t8_r1c3",
          rowHeaderCells: [ "t8_1km" ],
          columnHeaderCells: [ "t8_Matt", "t8_Males" ]
        },
        {
          cell: "t8_r1c4",
          rowHeaderCells: [ "t8_1km" ],
          columnHeaderCells: [ "t8_Todd", "t8_Males" ]
        },
        {
          cell: "t8_r2c1",
          rowHeaderCells: [ "t8_5km" ],
          columnHeaderCells: [ "t8_Mary", "t8_Females" ]
        },
        {
          cell: "t8_r2c2",
          rowHeaderCells: [ "t8_5km" ],
          columnHeaderCells: [ "t8_Betsy", "t8_Females" ]
        },
        {
          cell: "t8_r2c3",
          rowHeaderCells: [ "t8_5km" ],
          columnHeaderCells: [ "t8_Matt", "t8_Males" ]
        },
        {
          cell: "t8_r2c4",
          rowHeaderCells: [ "t8_5km" ],
          columnHeaderCells: [ "t8_Todd", "t8_Males" ]
        },
        {
          cell: "t8_r3c1",
          rowHeaderCells: [ "t8_10km" ],
          columnHeaderCells: [ "t8_Mary", "t8_Females" ]
        },
        {
          cell: "t8_r3c2",
          rowHeaderCells: [ "t8_10km" ],
          columnHeaderCells: [ "t8_Betsy", "t8_Females" ]
        },
        {
          cell: "t8_r3c3",
          rowHeaderCells: [ "t8_10km" ],
          columnHeaderCells: [ "t8_Matt", "t8_Males" ]
        },
        {
          cell: "t8_r3c4",
          rowHeaderCells: [ "t8_10km" ],
          columnHeaderCells: [ "t8_Todd", "t8_Males" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // spanned table header cells (v1), @headers define header order

      headerInfoMap = [
        {
          cell: "t9_r1c1",
          rowHeaderCells: [ "t9_females", "t9_mary" ],
          columnHeaderCells: [ "t9_1km" ]
        },
        {
          cell: "t9_r1c2",
          rowHeaderCells: [ "t9_females", "t9_mary" ],
          columnHeaderCells: [ "t9_5km" ]
        },
        {
          cell: "t9_r1c3",
          rowHeaderCells: [ "t9_females", "t9_mary" ],
          columnHeaderCells: [ "t9_10km" ]
        },
        {
          cell: "t9_r2c1",
          rowHeaderCells: [ "t9_females", "t9_betsy" ],
          columnHeaderCells: [ "t9_1km" ]
        },
        {
          cell: "t9_r2c2",
          rowHeaderCells: [ "t9_females", "t9_betsy" ],
          columnHeaderCells: [ "t9_5km" ]
        },
        {
          cell: "t9_r2c3",
          rowHeaderCells: [ "t9_females", "t9_betsy" ],
          columnHeaderCells: [ "t9_10km" ]
        },
        {
          cell: "t9_r3c1",
          rowHeaderCells: [ "t9_males", "t9_matt" ],
          columnHeaderCells: [ "t9_1km" ]
        },
        {
          cell: "t9_r3c2",
          rowHeaderCells: [ "t9_males", "t9_matt" ],
          columnHeaderCells: [ "t9_5km" ]
        },
        {
          cell: "t9_r3c3",
          rowHeaderCells: [ "t9_males", "t9_matt" ],
          columnHeaderCells: [ "t9_10km" ]
        },
        {
          cell: "t9_r4c1",
          rowHeaderCells: [ "t9_males", "t9_todd" ],
          columnHeaderCells: [ "t9_1km" ]
        },
        {
          cell: "t9_r4c2",
          rowHeaderCells: [ "t9_males", "t9_todd" ],
          columnHeaderCells: [ "t9_5km" ]
        },
        {
          cell: "t9_r4c3",
          rowHeaderCells: [ "t9_males", "t9_todd" ],
          columnHeaderCells: [ "t9_10km" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      //////////////////////////////////////////////////////////////////////////
      // spanned table header cells (v2), @headers define header order

      headerInfoMap = [
        {
          cell: "t10_r1c1",
          rowHeaderCells: [ "t10_1km" ],
          columnHeaderCells: [ "t10_females", "t10_mary" ]
        },
        {
          cell: "t10_r1c2",
          rowHeaderCells: [ "t10_1km" ],
          columnHeaderCells: [ "t10_females", "t10_betsy" ]
        },
        {
          cell: "t10_r1c3",
          rowHeaderCells: [ "t10_1km" ],
          columnHeaderCells: [ "t10_males", "t10_matt" ]
        },
        {
          cell: "t10_r1c4",
          rowHeaderCells: [ "t10_1km" ],
          columnHeaderCells: [ "t10_males", "t10_todd" ]
        },
        {
          cell: "t10_r2c1",
          rowHeaderCells: [ "t10_5km" ],
          columnHeaderCells: [ "t10_females", "t10_mary" ]
        },
        {
          cell: "t10_r2c2",
          rowHeaderCells: [ "t10_5km" ],
          columnHeaderCells: [ "t10_females", "t10_betsy" ]
        },
        {
          cell: "t10_r2c3",
          rowHeaderCells: [ "t10_5km" ],
          columnHeaderCells: [ "t10_males", "t10_matt" ]
        },
        {
          cell: "t10_r2c4",
          rowHeaderCells: [ "t10_5km" ],
          columnHeaderCells: [ "t10_males", "t10_todd" ]
        },
        {
          cell: "t10_r3c1",
          rowHeaderCells: [ "t10_10km" ],
          columnHeaderCells: [ "t10_females", "t10_mary" ]
        },
        {
          cell: "t10_r3c2",
          rowHeaderCells: [ "t10_10km" ],
          columnHeaderCells: [ "t10_females", "t10_betsy" ]
        },
        {
          cell: "t10_r3c3",
          rowHeaderCells: [ "t10_10km" ],
          columnHeaderCells: [ "t10_males", "t10_matt" ]
        },
        {
          cell: "t10_r3c4",
          rowHeaderCells: [ "t10_10km" ],
          columnHeaderCells: [ "t10_males", "t10_todd" ]
        }
      ];

      testHeaderCells(headerInfoMap);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>

<body>
  <a target="_blank"
     title="implement IAccessibleTable2"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=512424">
    Bug 512424
  </a>
  <a target="_blank"
     title="Table headers not associated when header is a td element with no scope"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=704465">
    Bug 704465
  </a>
  <a target="_blank"
     title="Support rowgroup and colgroup HTML scope"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=1141978">
    Bug 1141978
  </a>

  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <table id="table1" border="1">
    <thead>
      <tr>
        <th id="table1_date" colspan="2">Date</th>
        <th id="table1_qty" rowspan="2">Qty</th>
      </tr>
      <tr>
        <th id="table1_weekday">Weekday</th>
        <th id="table1_day">Day</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="table1_cell_1">Mon</td>
        <td id="table1_cell_2">1</td>
        <td id="table1_cell_3">20</td>
      </tr>
      <tr>
        <td id="table1_cell_4">Thu</td>
        <td id="table1_cell_5">2</td>
        <td id="table1_cell_6">15</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th id="table1_total" scope="row" colspan="2">Total</th>
        <td id="table1_cell_7">35</td>
      </tr>
    </tfoot>
  </table>

  <table id="table2" border="1">
    <thead>
      <tr>
        <th id="table2_ch_1">col1</th>
        <th id="table2_ch_2">col2</th>
        <td id="table2_ch_3" scope="col">col3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="table2_rh_1">row1</th>
        <td id="table2_cell_2">cell1</td>
        <td id="table2_cell_3">cell2</td>
      </tr>
      <tr>
        <td id="table2_rh_2" scope="row">row2</td>
        <td id="table2_cell_5">cell3</td>
        <td id="table2_cell_6">cell4</td>
      </tr>
    </tbody>
  </table>

  <table id="table3" border="1">
    <tr>
      <td id="table3_cell_1" headers="table3_ch_1">cell1</td>
      <td id="table3_cell_2" headers="table3_ch_2">cell2</td>
    </tr>
    <tr>
      <td id="table3_ch_1" scope="col">col1</td>
      <td id="table3_ch_2" scope="col">col2</td>
    </tr>
  </table>

  <table id="table4">
    <thead>
      <tr>
        <th id="table4_ch">colheader</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="table4_cell">bla</td>
      </tr>
    </tbody>
  </table>

  <table id="table5">
    <tr>
      <th id="table5_rh">rowheader</th>
      <td id="table5_cell">cell</td>
    </tr>
  </table>

  <table id="table6">
    <tr>
      <td>empty cell</th>
      <td id="table6_ch">colheader</td>
    </tr>
    <tr>
      <td id="table6_rh">rowheader</th>
      <td id="table6_cell" headers="table6_ch table6_rh">cell</td>
    </tr>
  </table>

  <table id="table7" class="data complex" border="1">
    <caption>Version 1 with rowgroup</caption>
    <thead>
    <tr>
      <td colspan="2">&nbsp;</td>
      <th id="t7_1km" scope="col">1 km</th>
      <th id="t7_5km" scope="col">5 km</th>
      <th id="t7_10km" scope="col">10 km</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <th id="t7_Females" rowspan="2" scope="rowgroup">Females</th>
        <th id="t7_Mary" scope="row">Mary</th>
        <td id="t7_r1c1">8:32</td>
        <td id="t7_r1c2">28:04</td>
        <td id="t7_r1c3">1:01:16</td>
      </tr>
      <tr>
        <th id="t7_Betsy" scope="row">Betsy</th>
        <td id="t7_r2c1">7:43</td>
        <td id="t7_r2c2">26:47</td>
        <td id="t7_r2c3">55:38</td>
      </tr>
      <tr>
        <th id="t7_Males" rowspan="2" scope="rowgroup">Males</th>
        <th id="t7_Matt" scope="row">Matt</th>
        <td id="t7_r3c1">7:55</td>
        <td id="t7_r3c2">27:29</td>
        <td id="t7_r3c3">57:04</td>
      </tr>
      <tr>
        <th id="t7_Todd" scope="row">Todd</th>
        <td id="t7_r4c1">7:01</td>
        <td id="t7_r4c2">24:21</td>
        <td id="t7_r4c3">50:35</td>
      </tr>
    </tbody>
  </table>

  <table id="table8" class="data complex" border="1">
    <caption>Version 2 with colgroup</caption>
    <thead>
      <tr>
        <td rowspan="2">&nbsp;</td>
        <th id="t8_Females" colspan="2" scope="colgroup">Females</th>
        <th id="t8_Males" colspan="2" scope="colgroup">Males</th>
      </tr>
      <tr>
        <th id="t8_Mary" scope="col">Mary</th>
        <th id="t8_Betsy" scope="col">Betsy</th>
        <th id="t8_Matt" scope="col">Matt</th>
        <th id="t8_Todd" scope="col">Todd</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="t8_1km" scope="row">1 km</th>
        <td id="t8_r1c1">8:32</td>
        <td id="t8_r1c2">7:43</td>
        <td id="t8_r1c3">7:55</td>
        <td id="t8_r1c4">7:01</td>
      </tr>
      <tr>
        <th id="t8_5km" scope="row">5 km</th>
        <td id="t8_r2c1">28:04</td>
        <td id="t8_r2c2">26:47</td>
        <td id="t8_r2c3">27:27</td>
        <td id="t8_r2c4">24:21</td>
      </tr>
      <tr>
        <th id="t8_10km" scope="row">10 km</th>
        <td id="t8_r3c1">1:01:16</td>
        <td id="t8_r3c2">55:38</td>
        <td id="t8_r3c3">57:04</td>
        <td id="t8_r3c4">50:35</td>
      </tr>

    </tbody>
  </table>

  <table id="table9" border="1">
    <caption>
      Example 1 (row group headers):
    </caption>
    <tr>
      <td colspan="2"><span class="offscreen">empty</span></td>
      <th id="t9_1km" width="40">1 km</th>
      <th id="t9_5km" width="35">5 km</th>
      <th id="t9_10km" width="42">10 km</th>
    </tr>
    <tr>
      <th id="t9_females" width="56" rowspan="2">Females</th>
      <th id="t9_mary" width="39">Mary</th>
      <td id="t9_r1c1" headers="t9_females t9_mary t9_1km">8:32</td>
      <td id="t9_r1c2" headers="t9_females t9_mary t9_5km">28:04</td>
      <td id="t9_r1c3" headers="t9_females t9_mary t9_10km">1:01:16</td>
    </tr>
    <tr>
      <th id="t9_betsy">Betsy</th>
      <td id="t9_r2c1" headers="t9_females t9_betsy t9_1km">7:43</td>
      <td id="t9_r2c2" headers="t9_females t9_betsy t9_5km">26:47</td>
      <td id="t9_r2c3" headers="t9_females t9_betsy t9_10km">55:38</td>
    </tr>
    <tr>
      <th id="t9_males" rowspan="2">Males</th>
      <th id="t9_matt">Matt</th>
      <td id="t9_r3c1" headers="t9_males t9_matt t9_1km">7:55</td>
      <td id="t9_r3c2" headers="t9_males t9_matt t9_5km">27:29</td>
      <td id="t9_r3c3" headers="t9_males t9_matt t9_10km">57:04</td>
    </tr>
    <tr>
      <th id="t9_todd">Todd</th>
      <td id="t9_r4c1" headers="t9_males t9_todd t9_1km">7:01</td>
      <td id="t9_r4c2" headers="t9_males t9_todd t9_5km">24:21</td>
      <td id="t9_r4c3" headers="t9_males t9_todd t9_10km">50:35</td>
    </tr>
  </table>

  <table id="table10" border="1">
    <caption>
      Example 2 (column group headers):
    </caption>
    <tr>
      <td rowspan="2"><span class="offscreen">empty</span></td>
      <th colspan="2" id="t10_females">Females</th>
      <th colspan="2" id="t10_males">Males</th>
    </tr>
    <tr>
      <th width="40" id="t10_mary">Mary</th>
      <th width="35" id="t10_betsy">Betsy</th>
      <th width="42" id="t10_matt">Matt</th>
      <th width="42" id="t10_todd">Todd</th>
    </tr>
    <tr>
      <th width="39" id="t10_1km">1 km</th>
      <td headers="t10_females t10_mary t10_1km" id="t10_r1c1">8:32</td>
      <td headers="t10_females t10_betsy t10_1km" id="t10_r1c2">7:43</td>
      <td headers="t10_males t10_matt t10_1km" id="t10_r1c3">7:55</td>
      <td headers="t10_males t10_todd t10_1km" id="t10_r1c4">7:01</td>
    </tr>
    <tr>
      <th id="t10_5km">5 km</th>
      <td headers="t10_females t10_mary t10_5km" id="t10_r2c1">28:04</td>
      <td headers="t10_females t10_betsy t10_5km" id="t10_r2c2">26:47</td>
      <td headers="t10_males t10_matt t10_5km" id="t10_r2c3">27:29</td>
      <td headers="t10_males t10_todd t10_5km" id="t10_r2c4">24:21</td>
    </tr>
    <tr>
      <th id="t10_10km">10 km</th>
      <td headers="t10_females t10_mary t10_10km" id="t10_r3c1">1:01:16</td>
      <td headers="t10_females t10_betsy t10_10km" id="t10_r3c2">55:38</td>
      <td headers="t10_males t10_matt t10_10km" id="t10_r3c3">57:04</td>
      <td headers="t10_males t10_todd t10_10km" id="t10_r3c4">50:35</td>
    </tr>
  </table>
</body>
</html>
